<template>
    <div class="page order-list-view">
        <wv-header title="订单列表" fixed>
            <div class="btn-back" slot="left">
                <i class="iconfont iot-back" @click="$router.go(-1)"></i>
            </div>
            <div class="btn-back" slot="right">
                <i class="iconfont iot-refresh" style="font-size: 22px;" @click="refreshList"></i>
            </div>
        </wv-header>

        <div class="main-header-fixed">
            <div v-if="!loading && list.length == 0" class="empty">
                <i class="iconfont iot-empty"></i>
            </div>
            <div v-else class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
                <div class="order-list" infinite-scroll-immediate-check="true" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
                    <div @click="goDetail(item.order_sn)" class="order-item" v-for="(item, key) in list" :key="key" :value="item">
                        <wv-preview
                                :title="'订单编号：' + item.order_sn"
                                :value="item.status_text"
                                :dataItems="item.items">
                        </wv-preview>
                    </div>

                </div>
                <p v-show="loading" class="loading-tips">
                    <wv-spinner type="snake" color="#444" :size="24"></wv-spinner>
                </p>

                <p v-if="loadOver" style="font-size: 12px;text-align: center;color: #888a85;">
                    <span>没有更多数据了</span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util';

    export default {
        data () {
            return {
                wrapperHeight: 80,
                loading: false,
                loadOver: false,
                search: {
                    keyword: ''
                },

                page: {
                    current: 1,
                    size: 10,
                },

                list: [],
            }
        },

        mounted () {
            this.loadMore();
        },

        methods: {
            loadMore() {
                this.getOrderList((orders) => {
                    let list = [];

                    for (let i in orders) {
                        let order = orders[i];
                        let item = {
                            order_sn: order.order_sn,
                            status_text: order.status_text,
                            items: [
                                { label: '设备编号', value: order.device_sn },
                                { label: '下单时间', value: order.created_at },
                            ]
                        }

                        if (order.status == 'success') {
                            item.items.push({
                                label: '开始时间',
                                value: order.service_start_at
                            });

                            item.items.push({
                                label: '结束时间',
                                value: order.service_end_at
                            });

                            item.items.push({
                                label: '充电时长',
                                value: order.consume_duration + '分钟'
                            });

                            item.items.push({
                                label: '订单金额',
                                value: order.order_money + '元'
                            });

                            item.items.push({
                                label: '支付时间',
                                value: order.paid_at
                            })
                        }

                        list.push(item);
                    }

                    this.list = this.list.concat(list);
                });
            },

            refreshList() {
                this.list = [];
                this.loadOver = false;
                this.page.current = 1;
                this.loadMore();
            },

            getOrderList (callback) {
                if (this.loadOver === false) {
                    this.loading = true;

                    let params = {
                        page: this.page.current,
                    };
                    params = Object.assign(params, this.search);

                    util.api().get(`/api/orders`, {
                        params,
                        headers: {
                            pageSize: this.page.size,
                        }
                    }).then((resp) => {
                        if (resp.data.status == true) {
                            if (resp.data.data.length > 0) {
                                this.page.current = this.page.current + 1;
                                callback(resp.data.data);
                            } else {
                                this.loadOver = true;
                            }
                        } else {
                            this.loadOver = true;
                        }
                        this.loading = false;
                    }).catch((e) => {
                        this.loading = false;
                        util.handleApiException(e, this, '获取订单列表数据失败');
                    })
                }
            },

            goDetail (orderSn) {
                this.$router.push({
                    name: 'order-detail',
                    query: {
                        orderSn: orderSn
                    }
                })
            }
        }
    }
</script>